<template>
  <div class="canvas-wrapper" ref="d3">
    
  </div>
</template>

<style >
.canvas-wrapper{
  width: 100%;  
  height: 100%;
  position: relative;
}
.canvas-wrapper canvas{
    width: 100%;
    height: 100%;
  }
</style>
<script setup lang="ts">
import { onMounted,ref, type Ref,onUnmounted } from 'vue';
import { initScene } from '../components/initScene';
import { initGrass } from '../components/grass';
import {Vector3,Color} from 'three';
const d3:Ref<HTMLElement> = ref(null);
const stage =  initScene({
  cameraPosition:new Vector3(-7, 3, 7),
  aixs:0,
  antialias:true,
  directLight:0.8,
  background:new Color(0x00aaff),
});
onMounted(()=>{
  d3.value.appendChild (stage.renderer.domElement);
  const {camera,renderer,scene,controls} = stage;
  stage.resize()
  initGrass(camera,renderer,scene,controls);
})
onUnmounted(()=>{
  stage.destroy();
})
</script>
